<template>
  <view class="model-select-container"
        @touchmove="touchmove"
        @touchstart="touchstart"
        @touchend="touchend"
  >
    <view class="body" :style="`height: ${pickerLayoutPx.optionShowBodyHeight}px`">
      <view class="body-select-row" :style="`height: ${pickerLayoutPx.activeOptionHeight}px;top:${pickerLayoutPx.activeOptionPositionTop}px`">

      </view>
      <view class="body-container" :style="style">
        <view :style="`height: ${pickerLayoutPx.optionsBeforeHeight}px;`"></view>
        <view :style="`height: ${pickerLayoutPx.optionRowHeight}px;`" :class="selectedIndex === index ? 'item-active' : 'item'" v-for="(item, index) in optionList"
              @click="selectedItem(index)">
            {{item.label}}
        </view>
        <view :style="`height: ${pickerLayoutPx.optionsAfterHeight}px;`"></view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {rpx2px} from "@/util/PageUtil";
import { ref, onMounted, getCurrentInstance, defineProps } from 'vue'
type Option = {
  label: string;
  value: string;
}
const props = defineProps({
  maxShowRows: {
    type: Number,
    default: 3,
    descriptors: '最多显示选项数量'
  },
  optionHeight: {
    type: Number,
    default: 100,
    descriptors: '选项行高,单位:rpx'
  },
  defaultValue: {
    type: String,
    default: '',
    descriptors: '默认值'
  },
  optionList: {
    type: Array as Option[],
    default: [],
    descriptors: ''
  }
});
const emit = defineEmits(['change'])

const maxOffset = ref(0)
const { proxy } = getCurrentInstance()
onMounted(()=>{
  init()
})

const optionHeightPx = rpx2px(props.optionHeight)
//单位统一px
const pickerLayoutPx = ref({
  optionRowHeight: optionHeightPx,//选项行高
  optionShowBodyHeight: 0,
  optionsBeforeHeight: 0,
  optionsAfterHeight: 0,
  activeOptionHeight: optionHeightPx,
  activeOptionPositionTop: 0,
})
const init = ()=>{
  let maxShowRows = props.maxShowRows
  const optionList = props.optionList || []
  if(maxShowRows > optionList.length){
    maxShowRows = optionList.length
  }
  const activeOptionIndex = parseInt((maxShowRows - 1)/2)
  const optionsBeforeHeight = activeOptionIndex * optionHeightPx
  const optionsAfterHeight = (maxShowRows - activeOptionIndex - 1) * optionHeightPx

  const optionShowBodyHeight = maxShowRows * optionHeightPx
  const activeOptionPositionTop = parseInt((maxShowRows - 1)/2) * optionHeightPx

  const pickerLayoutPxValue = pickerLayoutPx.value
  pickerLayoutPxValue.optionShowBodyHeight = optionShowBodyHeight
  pickerLayoutPxValue.activeOptionPositionTop = activeOptionPositionTop
  pickerLayoutPxValue.optionsBeforeHeight = optionsBeforeHeight
  pickerLayoutPxValue.optionsAfterHeight = optionsAfterHeight


  pickerLayoutPx.value = pickerLayoutPxValue
  console.log('form picker init, pickerLayoutPx:', pickerLayoutPxValue)

  maxOffset.value = (optionList.length - 1) * optionHeightPx


  const defaultValue = props.defaultValue
  if(!!defaultValue){
    for (let index = 0; index < optionList.length; index ++){
      if(optionList[index].value === defaultValue){
        selectedItem(index)
      }
    }
  }else {
    selectedItem(0)
  }
}

const style = ref('')
const startY = ref(0)
const touchstart = (e)=>{
  const touche = e.touches[0] || {}
  startY.value = touche.clientY || 0
}
const selectedIndex = ref(0)
const offset = ref(0)
const lastOffset = ref(0)
const touchmove = (e)=>{
  // e.preventDefault();
  const touche = e.touches[0] || {}
  const currentY = touche.clientY || 0
  const move  = currentY - startY.value

  const currentPosition = lastOffset.value
  let targetPosition = currentPosition + move

  const max = maxOffset.value
  if(targetPosition >= 0){
    targetPosition = 0
  }else if(-targetPosition > max){
    targetPosition = -max
  }
  offset.value = targetPosition

  style.value = `transform: translateY(${targetPosition}px);`
}
const touchend = (e)=>{
  const move = offset.value
  const targetSelectedIndex = parseInt((-move/100).toFixed(0))
  const currentSelectedIndex = selectedIndex.value

  selectedItem(targetSelectedIndex)

  if(targetSelectedIndex != currentSelectedIndex){
    emit('change', props.optionList[targetSelectedIndex])
  }
}

const selectedItem = (index)=>{
  const currentIndex = selectedIndex.value
  selectedIndex.value = index
  const targetOffset = -index * 100
  lastOffset.value = targetOffset
  offset.value = targetOffset

  const rows = Math.abs(currentIndex - index) || 1
  style.value = `transform: translateY(${targetOffset}px);transition: all ${0.25*rows}s ease-in-out;`
}

</script>

<style lang="scss">
.model-select-container{
  .body{
    position: relative;
    width: 100%;
    overflow: hidden;
    .body-select-row{
      position: absolute;
      width: 100%;

      background: #F3F3F3;
      border-radius: 24rpx;
    }
    .body-container{
      width: 100%;
      //padding: 200rpx 0;
      .item{
        width: 600rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 36rpx;
        color: #202425;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }
      .item-active{
        width: 600rpx;
        display: flex;
        justify-content: center;
        align-items: center;


        font-size: 40rpx;
        color: #43CD7F;
        letter-spacing: 0;
        text-align: center;
        font-weight: 500;
      }
    }
  }
}
</style>
